<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    什么是Ajax?
    概念: Asynchronous JavaScript And XML，异步的JavaScript和XML。
    作用:数据交换:通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
    异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用户名是否可用的校验等等。
    -->

    <!--
    使用Axios
    Axios对原生的Ajax进行了封装,简化了书写,快速开发

    1.引入Axios的js文件
    <script src="js/axios-0.18.0.js"></script>

    2．使用Axios发送请求，并获取响应结果
    axios({
    method: "get",
    url:"http://vapi.smart-xwork.cn/mock/169327/emp/list
    }).then(result =>{//then是成功回调函数
    console.log(result.data);
    })

    axios({
    method: "post",
    ur1: "http://yapi.smart=xwork.cn/mock/169327/emp/deleteById"，
    data: "id=1"
    }).then(result =>{
    console.log(result.data);
    })


    简写方式:
    axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {console.log(result.data);});
    axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then((result) => {console.log(result.data);});

    -->
    <!--vue的js库-->
    <script src="../js/vue.js"></script>
    <!--axios的ajax的js库-->
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <button @click="sendAjax">发送请求</button>
</div>
</body>
</html>
<script>
    new Vue({
        el: "#app",
        data: {},
        methods: {
            sendAjax() {
                //往 http://yapi.smart-xwork.cn/mock/169327/emp/list 发送ajax请求，获取数据
                // axios(
                //      {//发送请求
                //         method: "get",
                //         url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
                //     }
                // ).then( //成功回调函数,接收响应数据
                //     (result) => {
                //         console.log(result.data);
                //         /*
                //         code: 1
                //         data: Array(4)
                //         0: {id: 1, name: '谢逊', image: 'https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg', gender: 1, job: '班主任', …}
                //         1: {id: 2, name: '殷天正', image: 'https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/2.jpg', gender: 1, job: '讲师', …}
                //         2: {id: 3, name: '韦一笑', image: 'https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/3.jpg', gender: 1, job: '讲师', …}
                //         3: {id: 4, name: '黛绮丝', image: 'https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/4.jpg', gender: 2, job: '讲师', …}
                //         length: 4
                //         message: "success"
                //          */
                //     }
                // )
                axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
                    console.log(result.data);
                });//简写
                // axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById", "id=1").then(result => {
                //     console.log(result.data);
                // });

            }
        }
    })
</script>